<template>
  <Card>
    <EchartsChart :option="barOption"></EchartsChart>
  </Card>
  <Card>
    <EchartsChart :option="lineOption"></EchartsChart>
  </Card>
  <Card>
    <EchartsChart :option="pieOption"></EchartsChart>
  </Card>
</template>

<script>
export default {
  name: 'Left',
}
</script>
<script setup>

import {reactive, onMounted} from 'vue'

const barOption = reactive({
  title: {
    text: '各行业程序员数量',
  },
  xAxis: {
    data: []
  },
  series: {
    name: '程序员数量',
    type: 'bar',
    data: [],
    barWidth: '40%'
  }
})
const lineOption = reactive({
  title: {
    text: '学习变化',
  },
  xAxis: {
    data: []
  },
  series: [
    {
      name: '新增项目',
      type: 'line',
      data: [],
      smooth: true,
    },
    {
      name: '新增技能',
      type: 'line',
      data: [],
      smooth: true,
    },
  ]
})
const pieOption = reactive({
  title: {
    text: '工程师年龄分布',
  },
  xAxis: {
    show: false
  },
  yAxis: {
    show: false
  },
  series:{
    name: '工程师年龄分布',
    type: 'pie',
    data: [],
    radius: ['35%', '50%'],
    label: {
      show: false
    },
  },
  legend: {
    left: 'center',
    bottom: 5,
    top: 'auto'
  },
  tooltip: {
    trigger: 'item',
    // formatter: '{a}<br>{b}:{c}({d}%)'
    formatter: (params) => {
      console.log(params)
      const {seriesName, marker, name, value, percent} = params
      return `${seriesName}<br>${marker}${name}:${value}(${percent}%)`
    }
  }
})



onMounted(() => {
  setTimeout(() => {
    const result = {
      barXaxis: [
        '旅游行业',
        '游戏行业',
        '电商行业',
        '医疗行业',
        '金融行业',
        '教育培训',
        '餐饮行业',
      ],
      barSeriesData: [300, 200, 400, 250, 550, 450, 350],
      lineXaxis: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      line1SeriesData: [
        300, 200, 400, 250, 550, 450, 300, 200, 400, 250, 550, 450,
      ],
      line2SeriesData: [
        250, 550, 450, 300, 200, 400, 250, 550, 450, 300, 200, 400,
      ],
      pieSeriesData: [
        {
          name: '20岁以下',
          value: 11,
        },
        {
          name: '20-29岁',
          value: 22,
        },
        {
          name: '30-39岁',
          value: 33,
        },
        {
          name: '40-49岁',
          value: 44,
        },
        {
          name: '50岁以上',
          value: 55,
        },
      ],
    };

    // 更新配置中的数据
    barOption.xAxis.data = result.barXaxis
    barOption.series.data = result.barSeriesData

    lineOption.xAxis.data = result.lineXaxis
    lineOption.series[0].data = result.line1SeriesData
    lineOption.series[1].data = result.line2SeriesData

    pieOption.series.data = result.pieSeriesData
  }, 1000);
})


</script>

<style scoped>

</style>
